<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ group2937Nine})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view id="barTitle" :style="{ opacity: opacityStyle, height: heightSystemss+Number(50) + 'px' }"
			v-show="!hiddenModel">
			<text>声音克隆</text>
		</view>

		<view class="flex-start-center " style="color:#333333" @click="localFn()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 声音克隆</text>
		</view>


		<view style="margin-top: 250rpx;">
			<view class="v-top">
				<view class="title-cls">
					克隆标题
					<text>*</text>
				</view>
				<view class="p-bo bj-f1"><input type="text" v-model="name" class="v-input" placeholder="请输入声音克隆名称"
						placeholder-class="placeholder" /></view>

				<view class="title-cls">
					参考音频
				</view>

				<view class="reference-text flex-column">
					<view class="reference-title">——— 请按照文本文字录音 ———</view>
					<text>{{textInfo[selIndex].segText}}</text>


					<view class="flex-align-center " style="width: 100%;">
						<picker mode="selector" :range="sexList" range-key="name" style="width:274rpx"
							@change="sexStatusClick" class="width26" @click="statusClick(1)">
							<view class="flex-column">
								<image class="img-85" :src="selType==1 ?group3481Three :group3314Nine">
								</image>
								<view class="flex-align-center">
									<view class="font-size_22rpx" :class="selType==1 ? 'color_9a62f3' : 'color_666666'">
										{{ sexStatus }}
									</view>
									<!-- <image :src="severDownward" class="down-cls"></image> -->
									<image class="down-cls" :src="selType==1 ?group3475Three :tabTop">


								</view>
							</view>
						</picker>
						<picker mode="selector" :range="ageList" range-key="name" @change="ageStatusClick"
							style="width:350rpx" class="width26" @click="statusClick(2)">
							<view class="flex-column">
								<image class="img-85" :src="selType==2 ? group3482Three : group3316Nine">
								</image>
								<view class="flex-align-center">
									<view class="font-size_22rpx" :class="selType==2 ? 'color_9a62f3' : 'color_666666'">
										{{ ageStatus }}
									</view>
									<image class="down-cls" :src="selType==2 ?group3475Three :tabTop">

								</view>
							</view>
						</picker>
						<picker mode="selector" :range="languageList" range-key="name" @change="languageStatusClick"
							@click="statusClick(3)" style="width:327rpx" class=" width26">
							<view class="flex-column">
								<image class="img-85" :src="selType==3 ? group3483Three: group3315Nine">
								</image>
								<view class="flex-align-center">
									<view class="font-size_22rpx" :class="selType==3 ? 'color_9a62f3' : 'color_666666'">
										{{ languageStatus }}
									</view>
									<image class="down-cls" :src="selType==3 ?group3475Three :tabTop">
								</view>
							</view>
						</picker>
						<view class=" flex-end" style="width: 170rpx;"></view>

						<view class="switch-cls flex" @click="getTrainTexts(selIndex)">
							<image class="qhImg" :src="group2918Five" mode=""></image>
							切换
						</view>
					</view>
				</view>
			</view>




			<soundRecording @confirm="confirmMp3"></soundRecording>
			<view class="flex-column" v-if="soundList.length > 0">


				<!-- <view class="img-music flex-column" v-if="isPlay" @click="play(soundList[0])">
					<image :src="digitalPeopPause3"></image>
					<view>播放</view>
				</view>
				<view class="img-music flex-column" v-else @click="pause(soundList[0])">
					<image :src="digitalPeopPlay3"></image>
					<view>暂停</view>
				</view> -->

				<view class="list-public2 flex-between ">

					<view class="flex-align-center">
						<block>
							<view class="display-a-jc r-play" v-if="isPlays==1" @click="trialListenings(soundList[0])">

								<image class="img-94" :src="group3197  " mode=""></image>
							</view>
							<view class="display-a-jc r-play" v-else @click="trialListenings(soundList[0])">

								<image class="img-94" :src="group3177" mode=""></image>
							</view>
						</block>

						<view class="flex-columns">
							<view class="r-name">试听声音</view>

						</view>
					</view>
					<view class="flex-align-center try-listening-cls" @click="trialListenings(soundList[0])">
						<iamge></iamge>
						<view style="color: #fff;">试听</view>
					</view>
				</view>
				<!-- <view v-if="uploadType==1" class="img-music flex-column" @click="clearAdio()">
					<image :src="digitalPeopleAgain"></image>
					<view>重新上传</view>
				</view>
				<view class="img-music flex-column" v-if="uploadType==2">
					<image :src="digitalPeopleAgain" @click="clearAdio()"></image>
					<view>重新录制</view>
				</view> -->
			</view>





			<!-- 隐私协议 -->
			<radio-group name="apply" class="radioText flex-start-center" :class="'animation-' + animation"
				@click="checkedOn2()">
				<label @click.stop="checkedOn2()">
					<radio :checked="agreeChecked" value="1" color=" rgba(100, 117, 255, 1)"
						style="transform:scale(0.8);padding-left:12rpx;" />
				</label>
				<view class="agree flex-align-center">
					<view>我已阅读并同意</view>
					<text @click.stop="toAgreement()">《请先阅读并同意声音克隆要求》</text>
				</view>
			</radio-group>




			<view class="height90"></view>
			<view class="position-cls flex">
				<view class="v-but flex font-weight_bold" :class="!fileUrl ? 'opacity5' : ''" @click="vBut()">
					开始训练{{'('+"算力："+tallySet.voice_tally+')'}}
				</view>
			</view>
		</view>


		<!-- 训练前提示 弹框 -->
		<sunui-popup ref="pop2">
			<template v-slot:content>

				<view class="v-pop-cls">
					<view class="video-title-cls flex">声音克隆要求</view>
					<view class="detail-cls">请在安静无噪音的环境，使用手机录音
						设备按下方要求录制高清音频克隆</view>
					<image mode="widthFix" :src="group2421Nine"></image>

					<view class="color_999999 margin-top_20rpx">
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>支持在线录音或上传音频，音频要MP3格式</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>上传的音频长度15秒以上，容量10M以内</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>录制过程中要保证环境安静不得有明显噪音</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>声音不要进行混响和任何特效处理要保持自然</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>录制过程中只能有一个人的声音禁止多人人声</text>
						</view>
						<view class="flex-align-center hint-cls">
							<view></view>
							<text>录制时要语速均衡，声音大小不要忽大忽小。</text>
						</view>
					</view>
					<view @click="sumbumit()" class="c-but flex">确定</view>
				</view>



			</template>
		</sunui-popup>







	</view>
</template>

<script>
	const base64 = require('@/utils/ali-oos/base64.js'); //Base64,hmac,sha1,crypto相关算法
	require('@/utils/ali-oos/hmac.js');
	require('@/utils/ali-oos/sha1.js');
	const Crypto = require('@/utils/ali-oos/crypto.js');
	import soundRecording from '@/components/sound-recording/sound-recording.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				tabBottom: this.$imgs.tabBottom,
				digitalPeopleAgain: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/again.png',
				digitalPeopPlay3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/play3.png',
				digitalPeopPause3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/pause3.png',
				tabTop: this.$imgs.tabTop,
				qh: this.$imgs.qh,
				animation: '',
				agreeChecked: false,
				group2421Nine: this.$imgs.group2421Nine,
				tempFiles: [], //上传获取到的文件数组
				/* 上传视频start */
				formData: {
					key: '',
					policy: '',
					OSSAccessKeyId: '',
					signature: '',
					success_action_status: '200'
				},

				policyText: {
					expiration: '2050-01-01T12:00:00.000Z', //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
					conditions: [
						['content-length-range', 0, Number(uni.getStorageSync('upload_allow_size'))] // 设置上传文件的大小限制(104857600为：100MB，31457280为30MB)
					]
				},

				upPicUrl2: '',
				ossUrl: '', //上传阿里云返回视频路径
				navTop: '',

				group2937Nine: this.$imgs.group2937Nine,
				materialBg: this.$imgs.violet,

				group3311Nine: this.$imgs.group3311Nine,
				group3312Nine: this.$imgs.group3312Nine,
				group3313Nine: this.$imgs.group3313Nine,
				group3177: this.$imgs.group3177,
				group3197: this.$imgs.group3197,



				group3314Nine: this.$imgs.group3314Nine,
				group3315Nine: this.$imgs.group3315Nine,
				group3316Nine: this.$imgs.group3316Nine,


				severDownward: this.$imgs.severDownward,
				group2918Five: this.$imgs.group2918Five,


				group3481Three: this.$imgs.group3481Three,
				group3475Three: this.$imgs.group3475Three,
				group3482Three: this.$imgs.group3482Three,
				group3483Three: this.$imgs.group3483Three,


				group3476Three: this.$imgs.group3476Three,
				group3479Three: this.$imgs.group3479Three,
				group3480Three: this.$imgs.group3480Three,



				mediaRecorder: null,
				audioChunks: [],
				recordings: [], // 存放录音文件的url
				isRecording: false, // 是否录音
				uniFileListAudio: [], // 录音文件的url
				currentPlayingIndex: -1, // 当前播放的索引
				currentAudio: null, // 当前播放的音频实例
				playProgress: 0, // 播放进度
				audioDurations: [], // 存储每个录音的时长
				startTime: 0, // 记录开始录音的时间
				debouncedRecord: null, // 用于存储防抖后的方法
				// 页面data


				isSex: '1', //1男 2女

				time: '00:00', //录音时长

				audioUrl: '', //音频路径
				audioName: '', //音频名称

				name: '', //名称
				train_mode: '', //1-快速模式 2-高级模式
				train_mode_name: '',

				isPlay: '1', //1暂停 否则播放

				isWhether: true, //判断重复点击

				system: uni.getStorageSync('system'),

				tallySetObj: {},

				audioCsUrl: '',

				tempFiles: [],
				soundList: [],
				audio: null,
				form: {},
				/* 上传视频start */
				formData: {
					key: '',
					policy: '',
					OSSAccessKeyId: '',
					signature: '',
					success_action_status: '200'
				},

				
				fileUrl: '',

				// 音频选择性别、年龄、语种

				sexStatus: '性别',
				sexList: [{
						name: '男',
						id: 1
					},
					{
						name: '女',
						id: 2
					}
				],

				ageStatus: '年龄',
				ageList: [{
						name: '儿童',
						id: 1
					},
					{
						name: '青年',
						id: 2
					},
					{
						name: '中年',
						id: 3
					},
					{
						name: '中老年',
						id: 4
					}
				],
				languageStatus: '语言',

				languageList: [{
						name: '中文',
						id: 0
					},
					{
						name: '英文',
						id: 1
					},
					{
						name: '日语',
						id: 2
					},
					{
						name: '韩语',
						id: 3
					},
					{
						name: '俄语',
						id: 4
					}
				],
				selType: 1,
				textInfo: [], //文案内容
				pointInfo: {},
				selIndex: 0,

				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				isPlay: '1',
				isPlays: 2,
				uploadType: '',
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				uid: uni.getStorageSync('uid'),
				memberSetObj: {}

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;
			this.queryPoints()

			this.ageStatusClick()
			this.languageStatusClick()
			this.sexStatusClick()

			this.set()

			this.createdgetSystemInfo()

			this.userInfos()
			this.tallySetFn()
			this.memberSetFn()





		},
		components: {
			soundRecording
		},
		onPageScroll(ev) {


			if (ev.scrollTop > 10) {
				let opacity = ev.scrollTop / 140

				// this.opacityStyle = opacity > 1 ? 1 : opacity
				this.opacityStyle = 1
				this.hiddenModel = false
				// this.createdgetSystemInfo();

			} else {
				this.hiddenModel = true
			}
		},
		computed: {


		},
		methods: {
			clearAdio() {
				this.soundList = []
				// 关闭播放 
				this.isPlays = 2
				innerAudioContext.stop();



			},
			trialListenings(url) {

				console.log(url)
				innerAudioContext.src = url;
				console.log(innerAudioContext)
				this.$forceUpdate()
				if (this.isPlays == 2) {
					this.isPlays = 1;
					innerAudioContext.play();
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext.onEnded(() => {
						this.isPlays = 2;

						innerAudioContext.pause();
						// this.$sun.toast("音频播放完成");
						console.log('音频播放结束：');
					});
					innerAudioContext.onError(err => {
						innerAudioContext.destroy();
						console.log('播放音频出错：', err);
					});
				} else {
					this.isPlays = 2;
					innerAudioContext.pause();
					innerAudioContext.onPause(() => {
						console.log('暂停播放');
					});
					console.log('暂停播放');
				}
			},
			sumbumit() {
				this.$refs.pop2.cloase()
			},
			checkedOn2(e) {
				this.agreeChecked = !this.agreeChecked
			},






			toAgreement() {
				this.$refs.pop2.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true,
					topclose: false
				});
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			/*  阿里云设置  */
			async set() {
				const result = await this.$http.get({
					url: this.$api.uploadSet,

				});
				if (result.errno == 0) {
					// accessKey 阿里云key秘钥 accessId 阿里云id
					console.log('result', result);
					this.upPicUrl2 = 'https://' + result.data.alioss_domain;
					this.formData.OSSAccessKeyId = result.data.alioss_access_key_id;
					this.formData.policy = base64.encode(JSON.stringify(this.policyText));
					let message = this.formData.policy;
					let bytes = Crypto.HMAC(Crypto.SHA1, message, result.data.alioss_access_key_secret, {
						asBytes: true
					});
					this.formData.signature = Crypto.util.bytesToBase64(bytes);

					console.log('------------formData', this.formData);
				}
			},
			confirmMp3(val) {
				let markIndex = val.lastIndexOf('.');
				let suffix = val.substring(markIndex);
				this.uploadType = 2
				console.log(val)
				this.formData.key = new Date().getTime() + Math.floor(Math.random() * 150) + suffix;
				let formData = {
					...this.formData
				};


				this.fileUrl = this.upPicUrl2 + '/' + this.formData.key;
				uni.uploadFile({
					name: 'file', //文件上传的name值
					url: this.upPicUrl2, //接口地址
					formData: formData, //上传额外携带的参数
					filePath: val, //临时路径
					success: uploadFileRes => {
						console.log('this.formData222222', this.formData);
						if (uploadFileRes.statusCode != 200) {
							uni.showToast({
								title: '上传失败 : ' + uploadFileRes.data,
								icon: 'none'
							});
						} else {
							this.isUpload = true;
							this.soundList = []
							this.soundList.push(this.fileUrl);
							console.log('this.soundList', this.soundList);
							this.$sun.toast('上传成功');
							this.tempFiles = [];
							uni.hideLoading(); //清除加载中
						}
					},
					fail: e => {
						uni.showToast({
							title: '上传失败==>' + e,
							icon: 'none'
						});
					}
				});
			},
			handleLogin() {
				if (uni.getStorageSync('uid')) {
					return true;
				} else {
					setTimeout(()=>{
						this.$sun.toast("请先授权登录");
					},500)
					uni.switchTab({
						url: `/pages/mine/mine`
					});
				}
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},
			//克隆训练
			async vBut() {
				if (this.handleLogin()) {
					if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {
						uni.showModal({
							title: '温馨提示',
							content: '你当前不是会员，请开通会员后享受该功能',
							confirmText: '开通会员',
							confirmColor: '#4A5EFF',
							success: async (res) => {
								if (res.confirm) {


									this.$sun.navGo('/pages/contactUs/memberCenter')

								} else if (res.cancel) {

								}
							}
						});
					} else {
						if (uni.getStorageSync('uid')) {
							if (!this.agreeChecked) {
								this.$sun.toast('请先阅读并同意声音克隆要求');
								this.animation = 'shake';
								setTimeout(() => {
									this.animation = '';
								}, 1300);
								return;
							}
							if (!this.name) {
								this.$sun.toast('请输入克隆名称', 'none');
								return;
							}
							if (!this.fileUrl) {
								this.$sun.toast('请先录制音频文件', 'none');
								return;
							}


							if (!this.isWhether) {
								return;
							}
							this.isWhether = false;
							console.log(this.form, 'this.form')
							uni.showLoading({
								title: '训练中...',
								mask: true
							});

							const result = await this.$http.post({
								url: this.$api.voiceSave,
								data: {
									uid: uni.getStorageSync('uid'),
									name: this.name,
									voice_urls: [this.fileUrl],
									seg_id: this.textInfo[this.selIndex].segId, // 文案id
									sex: this.form.sex, // 1男2女 
									age_group: this.form.ageGroup, //1 儿童 2 青年3 中年4，中老年’
									language: this.form.language, // 0中文1英文2日3韩4俄'

								}
							});
							if (result.errno == 0) {
								uni.hideLoading()
								this.soundList = [];
								this.name = '';
								this.$sun.toast(result.message, 'none');
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/digitalHuman/soundCloningList'
									});
									this.isWhether = true;
								}, 2000);
							} else {
								uni.hideLoading()
								this.$sun.toast(result.message, 'none');
								this.isWhether = true;
							}
						} else {
							uni.showModal({
								content: '请先完善信息',
								cancelText: '取消',
								confirmText: '去完善',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/auth/auth?type=1'
										});
									} else if (res.cancel) {
										// this.navig();
									}
								}
							});
						}
					}
				}



			},

			play(speech) {
				console.log(speech);
				this.isPlay = '';
				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				this.$nextTick(() => {

					innerAudioContext.play();
				});
			},
			pause(speech) {
				this.isPlay = 1;
				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				this.$nextTick(() => {
					innerAudioContext.pause();
				});
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
						console.log(navHeight, '==========================')

					},
					fail(err) {
						console.log(err);
					}
				});
			},
			// 显示状态选择
			statusClick(e) {
				this.selType = e
			},
			getTrainTexts(index) {
				this.selIndex = (index + 1) % this.textInfo.length;
			},
			async queryPoints() {
				// 查询oem，发布视频点数
				const result2 = await this.$http.get({
					url: this.$api.voiceText,

				});
				if (result2.errno == 0) {
					if (result2.data) {
						console.log('发布频点数result2', result2);
						this.textInfo = result2.data;
					}
				} else {
					this.$sun.toast(result2.msg, 'none');
				}
			},
			localFn() {
				this.$sun.navBack()
			},

			// 性别选择
			sexStatusClick(e) {
				// 选中后会触发这个回调函数 e.target.value是你选中的下拉菜单数组的索引
				const index = e && e.target.value ? e.target.value : 0;
				this.form.sex = this.sexList[index].id;
				this.sexStatus = '性别：' + this.sexList[index].name;
			},
			// 年龄选择
			ageStatusClick(e) {
				// 选中后会触发这个回调函数 e.target.value是你选中的下拉菜单数组的索引
				const index = e && e.target.value ? e.target.value : 0;
				this.form.ageGroup = this.ageList[index].id;
				this.ageStatus = '年龄：' + this.ageList[index].name;
			},

			// 语言选择
			languageStatusClick(e) {
				// 选中后会触发这个回调函数 e.target.value是你选中的下拉菜单数组的索引
				const index = e && e.target.value ? e.target.value : 0;
				this.form.language = this.languageList[index].id;
				this.languageStatus = '语言：' + this.languageList[index].name;
			},


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 500rpx;
		padding: 20rpx;
		position: relative;

		// 按钮样式
		.c-but {
			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(82.59deg, rgba(100, 117, 255, 1), rgba(116, 100, 255, 1) 100%);
		}


		.v-pop-cls {
			padding: 62rpx 24rpx 30rpx;
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.video-title-cls {
				background: linear-gradient(102.95deg, rgb(29, 130, 255), rgb(226, 79, 250));
				-webkit-background-clip:
					text;
				-webkit-text-fill-color:
					transparent;
				background-clip:
					text;
				text-fill-color:
					transparent;
				font-size: 40rpx;
				font-weight: 600;
				letter-spacing: 0%;
			}

			.detail-cls {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				font-weight: 600;
				margin: 30rpx 0;
			}

			image {
				width: 100%;
			}

			.hint-cls {
				margin-top: 20rpx;

				view {
					width: 16rpx;
					height: 16rpx;
					background: rgba(114, 102, 255, 1);
					border-radius: 50%;
					margin-right: 10rpx;
				}

				text {
					color: rgb(153, 153, 153);
					font-size: 26rpx;
				}
			}
		}

		/* 隐私协议 start */
		.radioText {
			margin: 38rpx 0 38rpx 20rpx;
		}

		.agree {
			color: #666;

			text {
				// color: #1890ff;
				color: rgba(114, 102, 255, 1);
			}
		}

		.animation {
			width: 10rem;
			height: 2rem;
			background: #ffffff;
			margin-top: 0.5rem;
		}

		.buy {
			margin-left: 20rpx;
			font-weight: 700;
			width: 709rpx;
			height: 104rpx;
			border-radius: 126rpx;
			color: #000000;
			background: linear-gradient(90.00deg, rgb(244, 220, 178) 2.102%, rgb(233, 188, 109) 100%);
		}

		.animation-shake {
			animation: shake 0.3s !important;
		}

		.list-public2 {
			// margin: 0 20rpx 20rpx;
			width: 700rpx;
			margin-top: 30rpx;
			padding: 20rpx 20rpx;
			position: relative;
			border-radius: 20rpx;
			background: #fff;

		}

		@keyframes shake {

			0%,
			100% {
				transform: translateX(0);
			}

			10% {
				transform: translateX(-18rpx);
			}

			20% {
				transform: translateX(16rpx);
			}

			30% {
				transform: translateX(-14rpx);
			}

			40% {
				transform: translateX(12rpx);
			}

			50% {
				transform: translateX(-10rpx);
			}

			60% {
				transform: translateX(8rpx);
			}

			70% {
				transform: translateX(-6rpx);
			}

			80% {
				transform: translateX(4rpx);
			}

			90% {
				transform: translateX(-2rpx);
			}
		}

		.try-listening-cls {
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			border-radius: 180rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			padding: 8rpx 22rpx;
		}

		/* 隐私协议 end */

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.r-play {
			margin-right: 30rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 100rpx;
			background: linear-gradient(180deg, rgb(136, 118, 230), rgb(176, 136, 248) 100%);
			margin-left: auto;
		}


		.img-94 {
			width: 64rpx;
			height: 64rpx;
		}

		.r-date {
			margin-top: 20rpx;
			color: rgb(153, 153, 153);
			font-size: 26rpx;
		}

		.r-name {
			color: rgb(51, 51, 51);
			font-size: 32rpx;
			font-weight: 600;
		}

		.record-title {
			view {
				font-size: 34rpx;
				font-weight: 600;
				color: rgba(114, 102, 255, 1);
				margin: 30rpx 0 8rpx;
			}

			text {
				color: #999;
				font-size: 28rpx;
				padding-bottom: 20rpx;
			}
		}

		.recorder {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 20rpx;

			.btnBK {
				margin: 0 auto;
				width: 160rpx;
				height: 160rpx;
				background-color: #f6f7f8;
				box-shadow: 0 0 10rpx #878a8a;
				border-radius: 50%;
				position: relative;

				.recordBtn {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border-radius: 50%;
					width: 140rpx;
					height: 140rpx;
					line-height: 140rpx;
					background-color: #f6f7f8;
					box-shadow: 0 0 10rpx #878a8a;
					border: none;
					color: #999;

					img {
						width: 160rpx;
						height: 160rpx;
						vertical-align: middle;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

			.audioList {
				margin-top: 20rpx;

				.item {
					background-color: #f8f8f8;
					border-radius: 8rpx;
					margin-bottom: 16rpx;
					overflow: hidden;

					.item-content {
						padding: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.play-area {
							flex: 1;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-right: 20rpx;
						}

						.left {
							display: flex;
							align-items: center;
							gap: 12rpx;
						}

						.right {
							display: flex;
							align-items: center;
						}

						.delete-btn {
							padding: 10rpx;

							&:active {
								opacity: 0.7;
							}
						}
					}

					.progress-bar {
						height: 4rpx;
						background-color: #eee;
						width: 100%;

						.progress {
							height: 100%;
							background-color: #007AFF;
							transition: width 0.1s linear;
						}
					}

					&:active {
						opacity: 0.8;
					}
				}
			}
		}


		// 页面css 

		.img-58 {
			width: 24rpx;
			height: 24rpx;
			margin-left: 4rpx;
			margin-top: 2rpx;
		}

		.v-name {
			width: 400rpx;
			color: #fff;
			font-size: 30rpx;
		}

		.img-96 {
			width: 34rpx;
			height: 34rpx;
			margin-left: 20rpx;
		}

		.v-play {
			width: 110rpx;
			border-radius: 100rpx;
			background-color: #8c54f2;
			padding: 6rpx 0;
			color: #fff;
			font-size: 24rpx;
			margin-left: auto;
		}



		.img-93 {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}

		.v-audio {
			width: 610rpx;
			height: 200rpx;
			margin: 40rpx 70rpx 0;
			background-color: #323232;
		}

		.color_9F9F9F {
			color: #9f9f9f;
			font-size: 24rpx;
		}

		.padd_20rpx {
			padding: 30rpx 0;
			border-bottom: 2rpx solid rgb(57, 57, 57);
		}

		.hint-cls {
			margin-top: 20rpx;

			view {
				width: 16rpx;
				height: 16rpx;
				background: rgb(141, 84, 242);
				border-radius: 50%;
				margin-right: 10rpx;
			}

			text {
				color: rgb(153, 153, 153);
				font-size: 26rpx;
			}
		}

		.img-65 {
			width: 40rpx;
			height: 40rpx;
		}

		.p-but {
			width: 510rpx;
			border-radius: 100rpx;
			background: linear-gradient(90deg, rgb(188, 120, 248), rgb(135, 80, 242) 100%);
			padding: 20rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			margin: 30rpx 90rpx 20rpx;
		}

		.line-height50 {
			height: 160rpx;
			line-height: 160rpx;
		}

		.sex-img {
			width: 240rpx;
			height: 88rpx;
		}

		.height180 {
			height: 180rpx;
		}

		.bottom-position {
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 180rpx;
			line-height: 180rpx;
			background-color: #fff;
			z-index: 99;
		}

		.height90 {
			height: 180rpx;
		}

		.position-cls {
			z-index: 9;
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			height: 160rpx;
			left: 0;
		}

		.v-but {
			width: 90%;
			margin: 0 34rpx;
			height: 100rpx;
			border-radius: 20rpx;
			background: linear-gradient(82.59deg, rgba(100, 117, 255, 1), rgba(116, 100, 255, 1) 100%);
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}

		.opacity5 {
			opacity: 1;
		}

		.color_B7B7B7 {
			color: #b7b7b7;
			font-size: 24rpx;
		}

		.v-add {
			color: #9d61f5;
			font-size: 30rpx;
		}

		.v-upload {
			border: 2rpx solid rgb(139, 83, 242);
			border-radius: 20rpx;
			width: 100%;
			height: 418rpx;
			text-align: center;
			color: #999;

			image {
				width: 88rpx;
			}

			text {
				color: rgb(153, 153, 153);
			}

			view {
				color: rgb(139, 83, 242);
				font-size: 32rpx;
				margin: 20rpx 0;
			}
		}

		.img-21 {
			width: 20rpx;
			height: 20rpx;
			margin-right: 20rpx;
		}

		.p-bo {
			// border-bottom: 2rpx solid rgb(96, 96, 96);
			margin-bottom: 36rpx;
		}

		.v-input {
			padding: 20rpx;
			width: 630rpx;

			border: 3rpx solid rgba(114, 102, 255, 1);
			// color: #fff;
		}

		.placeholder {
			color: #c8c8c8;
		}

		.img-music {
			height: 332rpx;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-bottom: 38rpx;
			}

			view {
				color: rgb(102, 102, 102);
			}
		}

		.play-icon2 {
			font-size: 80rpx;
			position: absolute;
			z-index: 999;
			top: 42%;
			left: 40%;
		}

		.play-icon {
			width: 92rpx;
			height: 92rpx;
			position: absolute;
			z-index: 999;
			top: 41%;
			left: 37%;
		}

		.bj-f1 {
			background-color: #ffff;
		}

		.v-top {
			// background-color: #323232;

			border-radius: 10rpx;
			margin: 20rpx 20rpx 30rpx;
		}

		.v-tips {
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 50rpx;
			color: #8e8e8e;
		}

		.v-time {
			text-align: center;
			color: #9f71fc;
			font-size: 38rpx;
			font-weight: bold;
			margin: 26rpx 0 14rpx;
		}

		.sex-2 {
			color: #8b53f2;
			font-weight: 600;
		}

		.sex-1 {
			color: #818181;
		}

		.sex {
			width: 375rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.img-70 {
			width: 112rpx;
			height: 112rpx;
			margin: 0 60rpx;
		}

		.v-frame {
			width: 130rpx;
			font-size: 24rpx;
			background-color: #636363;
			border-radius: 100rpx;
			color: #fff;
			padding: 6rpx 0;
		}

		.img-69 {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}

		.img-72 {
			width: 558rpx;
			height: 10rpx;
			margin-left: 96rpx;
			margin-bottom: 52rpx;
		}

		page {
			border-top: none;
			background-color: #fff;
		}

		// new
		.title-cls {
			padding: 0rpx 0 20rpx;
			font-size: 34rpx;
			font-weight: 600;
			color: #333333;

			text {
				margin-left: 10rpx !important;
				color: #ff0000 !important;
			}
		}

		.reference-text {
			border: 2rpx solid #7266FF;
			;
			border-radius: 20rpx;
			background: #fff;
			padding: 24rpx;

			.reference-title {
				color: #7266FF;
				;
				font-size: 30rpx;
				margin: 16rpx 0 24rpx;
			}

			.down-cls {
				width: 20rpx;
				height: 20rpx;
				margin-left: 8rpx;
			}

			text {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				padding-bottom: 36rpx;
			}

			.img-85 {
				width: 36rpx;
				height: 36rpx;
				margin-bottom: 8rpx;
			}

			.color_9a62f3 {
				color: rgba(116, 100, 255, 1)
			}

			.switch-cls {
				width: 290rpx;
				height: 60rpx;
				border-radius: 140rpx;

				background: linear-gradient(82.59deg, rgba(100, 117, 255, 1), rgba(116, 100, 255, 1) 100%);
				// background: linear-gradient(90.00deg, rgb(152, 249, 134),rgb(105, 233, 207) 100%);
				color: #fff;
				font-size: 26rpx;

				.qhImg {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.hint-all {
			padding: 32rpx 40rpx;

			.title-hint {
				view {
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(180deg, rgb(187, 119, 248), rgb(135, 80, 242) 100%);
					margin-right: 14rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}
	}
</style>